iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 26
6

var let const 三者有什麼差異呢?

入門前端時,買過一些課程,也包含 Javascript,但課程中沒有提到 let 及 const,後續許多範例中,較多使用 let 及 const,本篇來解解疑惑,整理一下三者的差異。

總體而言,ES6 新的宣告方式 let 及 const,比起 ES5 當中的 var 更爲嚴謹。主要可以由以下三項解釋。

  1. 塊級區域
  2. 變量提升
  3. 不允許重複宣告

塊級區域

使用 var 時,若在塊級區域宣告,仍然可以在塊級區塊之外拿取。如下:

{
  var v1 = "hello";
}
console.log(v1); //hello

如果是使用 let 或 const,則受塊級區域限制,無法於塊級區塊之外拿取,會報錯。如下:

{
  let v2 = "hi";
}
console.log(v2);
//Uncaught ReferenceError: v2 is not defined at ES6.js:9
{
  const v3 = "hehe";
}
console.log(v3);
//Uncaught ReferenceError: v3 is not defined at ES6.js:14

變量不提升

以往在使用 var 時,有一個不太直覺的特性,在宣告前使用是可以的,不會報錯,例如:

console.log(v4); // undefined
var v4 = 5 ;

上述範例中,是很經典變量提升現象。使得 v4 在使用前就存在,只是尚未被賦予值。

而在 ES6 let 及 const,移除這個不直覺的現象,在宣告前不能使用,會報錯。如下:

console.log(v4); 
//Uncaught ReferenceError: v4 is not defined at ES6.js:19
let v4 = 5 ;
console.log(v5);
//Uncaught ReferenceError: v5 is not defined at ES6.js:23
const v5 = 5 ;

在塊局區域限制及變數不提升綜合之下,會形成一些錯誤,如下:

var v9 = "hello";
if (true) {
  v9 = 'abc';
  //Uncaught ReferenceError: v9 is not defined at ES6.js:37
  let v9;
}

因 if 產生了一個塊級區域,裡面使用了會被塊級區域限制的 let,因此在塊級區域的 v9,在 let 宣告前使用,不被允許,因此報錯。

不允許重複宣告

使用 var 即使重複宣告也不會報錯,只會被後面宣告者覆蓋,如下:

var v6 = 5;
var v6 = 7;
console.log(v6); //7

但使用 ES6 let 及 const,移除這個不嚴謹的邏輯,每個變數在特定區塊下應該爲獨立的。

let v7 = 5;
let v7 = 7;
console.log(v7);
//Uncaught SyntaxError: Identifier 'v7' has already been declared
const v8 = 5;
const v8 = 7;
console.log(v8);
//Uncaught SyntaxError: Identifier 'v8' has already been declared

Const

const 比 let 更爲不同,因其意義爲不變的常量,因它代表特定意義,因此在宣告時,就要給它值,否則會報錯。

const v10;
//Uncaught SyntaxError: Missing initializer in const declaration

在一般純值中,一旦它被賦值後,就不能被更動。

const v11 = 4;
v11 = 5; 
//ES6.js:44 Uncaught TypeError: Assignment to constant variable.
  at ES6.js:44

而在複合類型中,例如物件,其常量的意義衍生爲位址不變,其值是可以變動的。

const v12 = {name:"lai"};
v12.name = "laiii";
console.log(v12.name); //laiii
v12 = {age:25};
//Uncaught TypeError: Assignment to constant variable.
  at ES6.js:49

以上爲 var、let、const 的整理與理解:)


上一篇
Day25 不求當個 Git 大師,只求和平相處(分支篇)
下一篇
Day27 JS 之 你是誰
系列文
前端之 " wow~原來是這樣啊 "30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
tortoise133
iT邦新手 5 級 ‧ 2019-01-16 13:43:20

感謝大大整理QQ,對新手幫助很大

我要留言

立即登入留言